<template>
  <div class="container">
    <view class="wrap">
      <view class="icon" v-if="info.status == 2">
        <uv-icon name="checkbox-mark" color="#fff" size="22"></uv-icon>
      </view>
      <view class="icon close" v-else>
        <uv-icon name="close" color="#fff" size="22"></uv-icon>
      </view>
      <view class="text textCenter bold">{{status_format(info.status)}}</view>

      <view class="box">
        <view class="item">销售方名称：{{info.xsfMc}}</view>
        <view class="item">开票合计金额：{{info.hjje}}</view>
        <view class="item flex alignCenter justifyBetween">数电票号码：{{info.qdfphm}}
          <uv-icon name="attach" @click="proxy.$auth.setClipboardData(info.qdfphm)"></uv-icon>
        </view>
        <view class="item">购买方名称：{{info.gmfMc}}</view>
        <view class="item">订单号：{{info.ddlsh}}</view>
      </view>

      <view class="button" v-if="info.pdf">
        <view class="btn">
          <uv-button text="下载发票PDF" type="primary" plain shape="circle" @click="proxy.$auth.saveFile(info.pdf)"></uv-button>
        </view>
        <view class="btn">
          <uv-button text="ofd地址" type="primary" plain shape="circle" @click="proxy.$auth.saveFile(info.ofdurl)"></uv-button>
        </view>
        <view class="btn">
          <uv-button text="xml地址" type="primary" plain shape="circle" @click="proxy.$auth.saveFile(info.xmlurl)"></uv-button>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let out_trade_no;
let info = ref({});
let options = ref([
  { label: "待审核", value: 0 },
  { label: "开票中", value: 1 },
  { label: "开具成功", value: 2 },
  { label: "开具失败", value: 3 },
  { label: "作废已申请", value: 4 },
  { label: "作废中", value: 5 },
  { label: "已作废", value: 6 },
  { label: "作废失败", value: 7 },
  { label: "已开未生成PDF（税控电票）", value: 8 },
  { label: "已审核", value: 9 },
  { label: "待扫码", value: 10 },
  { label: "已追回", value: 11 },
  { label: "需要登录", value: 1004 },
  { label: "需要认证", value: 1003 },
]);

onLoad((e) => {
  out_trade_no = e.out_trade_no;
  getInfo();
});

async function getInfo() {
  info.value = await proxy.$apis.queryOrderDetail({ ddlsh: out_trade_no });
  console.log("中年", info.value);
}

function status_format(e) {
  let index = proxy.$utils.findIndexByField(options.value, "value", e);
  if (index !== -1) return options.value[index].label;
}
</script>



<style lang="scss" scoped>
.container {
  .wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    .close {
      background-color: #f56c6c !important;
    }
    .icon {
      background-color: #7fc052;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      margin: 0 auto 12px;
    }
    .text {
      color: #36354d;
    }
    .button {
      width: 80%;
      margin: 50px auto;
    }
    .box {
      border: 1px solid #e0e0e0;
      padding: 15px;
      border-radius: 10px;
      width: 80%;
      margin: 20px auto;
      font-size: 15px;
      .item {
        margin-bottom: 5px;
      }
      .item:last-child {
        margin-bottom: 0 !important;
      }
    }
    .btn {
      margin-bottom: 10px;
    }
  }
}
</style>






